
<template>
  <div :class="`${prefixCls}-wrap`">
    <div :class="`${prefixCls}`">
      <div :class="`${prefixCls}-header`">权限管理</div>
      <div :class="`${prefixCls}-describe`">
        <h4>权限概览</h4>
        <p>数据流使用者可以使用该数据流创建一盘中的图表</p>
      </div>
      <div :class="`${prefixCls}-user`">
        <div :class="`${prefixCls}-user-title`">使用者</div>
        <a-row :gutter="20">
          <div :class="`${prefixCls}-user-list`">
            <a-col
              v-for="item in userScope"
              :key="item.id"
              :xl="4"
              :xxl="4"
              :lg="6"
              :md="6"
              :sm="12"
            >
              <div :class="`${prefixCls}-list-item`">
                <!-- <div class="left">
                  <a-avatar :size="28" src="" />
                </div> -->
                <div class="center">
                  <p class="name">{{ item.name }}</p>
                  <p class="department">组织：{{ item.departmentName }}</p>
                </div>
                <div class="right">
                  <a-icon class="delet-btn" type="delete" @click="deleteMember(item.id)" />
                </div>
              </div>
            </a-col>

            <!-- 添加成员按钮 -->
            <a-col :xl="4" :xxl="4" :lg="6" :md="6" :sm="12">
              <div :class="`${prefixCls}-list-item add-block`">
                <a-icon type="plus" class="add-icon"></a-icon>
                <span class="text" @click="addMembers">添加成员</span>
              </div>
            </a-col>
          </div>
        </a-row>
      </div>
    </div>

    <staff-selector
      v-show="false"
      v-model="userScope"
      :options="staffSelectorOpts"
      @cancel="closeModal"
      @ok="submitMember"
    ></staff-selector>
  </div>
</template>


<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import reportApi from "@/apis/report/data-source-api";
import StaffSelector from '@cloudpivot/form/src/common/components/form-staff-selector/pc/staff-selector.vue';

@Component({
  name: "permission-list",
  components: {
    StaffSelector
  },
})
export default class PermissionForm extends Vue {
  prefixCls: string = "permission-list";

  showModal: boolean = false

  staffSelectorOpts: any = {
    selectOrg: false,
    selectUser: true,
    mulpitle: true,
    showModel: false,
    showSelect: true,
    placeholder: "点击选择",
    title: '添加使用者'
  };

  userScope: any = null;

  mainId: string = ''

  @Prop({ default: "" })
  objectId!: String;

  async fetchPermissons() {
    const params = {
      objectId: this.objectId
    };
    reportApi.getPermission(params).then((res: any) => {
      if (res.errcode !== 0) {
        this.$message.error(res.errmsg as string);
        return
      } else {
        // 获取用户组信息
        if(res.data) {
          const data: any = res.data
          this.mainId = data.id 
          this.userScope = data.userScope
        }
      }
    })
  }

  closeModal() {
    this.staffSelectorOpts.showModel = false
  }

  submitMember(val) {
    console.log(val)
    this.staffSelectorOpts.showModel = false
    const ids = val.reduce((stat: any, item: any) => {
      stat.push(item.id)
      return stat
    }, []).join(",")
    const params = {
      id: this.mainId,
      objectId: this.objectId,
      userScope: ids
    }
    console.log(params)
    reportApi.updatePermiss(params).then((res: any) => {
      if (res.errcode !== 0) {
        this.$message.error(res.errmsg as string);
        return
      } else {
        this.$message.success(res.errmsg as string);
        this.fetchPermissons()
      }
    })
  }


  @Watch("objectId", {
    immediate: true,
  })
  onObjectIdChange(id: string) {
    console.log(id);
    if (id && id !== "") {
      this.fetchPermissons();
    }
  }

  // 删除成员
  deleteMember(id: string) {
    console.log('删除成员', id)
    this.userScope = this.userScope.filter((item: any) => item.id !== id)
  }

  // 添加成员
  addMembers() {
    this.staffSelectorOpts.showModel = true
  }

  async mounted() {}
}
</script>


<style lang="less" scoped>
</style>

<style lang="less">
.permission-list-wrap {
  flex: 1;
  overflow: hidden;
  background-color: #f3f5f8;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  .permission-list {
    flex: 1;
    background: #fff;
    padding: 24px;
  }

  .permission-list-header {
    font-size: 18px;
    color: #333;
  }

  .permission-list-user {
    .permission-list-user-title {
      color: #333;
      font-size: 14px;
      font-weight: 700;
      line-height: 40px;
      margin-top: 28px;
      margin-bottom: 14px;
    }
  }

  .permission-list-describe {
    h4 {
      font-size: 14px;
      font-weight: 700;
      line-height: 40px;
      margin-top: 28px;
      margin-bottom: 14px;
    }
    p {
      font-size: 12px;
      color: #1E1E1E;
    }
  }


  .permission-list-user-list {
    .permission-list-list-item {
      height: 84px;
      padding: 16px;
      display: flex;
      background: #F9F9F9;
      margin-bottom: 20px;
      .left {
        padding-right: 10px;
      }
      .center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        p {
          &:last-child {
            margin-top: 5px;
          }
        }
        .name {
          color: #17BC92;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .department {
          color: #999;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .delet-btn {
          display: none;
          cursor: pointer;
        }
      }
      &:hover {
        background: #FFF;
        border-radius: 2px;
        box-shadow: 0px 2px 5px #DDD;
        .delet-btn {
          display: block;
        }
      }
    }
    .add-block {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .add-icon {
        margin-right: 10px;
        font-size: 20px;
        color: #666;
      }
      .text {
        font-size: 12px;
        color: #666;
      }
    }

  }
}
</style>
